<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model.trim="dataForm.title" placeholder="请输入3-100个字符"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="brief" v-show="dataForm.contentType === 1">
        <el-input type="textarea" v-model="dataForm.brief" placeholder="请输入3-100个字符"></el-input>
      </el-form-item>
      <el-form-item label="主图" prop="coverUrl">
        <uploader :fileList="coverUrlList" :multi="false" type="image" @uploaded="imageUploaded"></uploader>
        <span>小提示：建议上传大小为250*180(px)像素图</span>
      </el-form-item>
      <el-form-item label="内容类型" prop="contentType">
        <el-radio-group v-model="dataForm.contentType">
          <el-radio :label="0">图文内容</el-radio>
          <el-radio :label="1">视频内容</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容" v-show="dataForm.contentType === contentType.imageText">
        <ck-editor ref="ckEditor" :change="contentChanged" />
      </el-form-item>
      <el-form-item v-show="dataForm.contentType === contentType.video">
        <uploader type="video" @uploaded="videoUploaded" :fileList="videoUrlList"></uploader>
      </el-form-item>
      <!--      <el-form-item label="排序" prop="sort">-->
      <!--        <el-input-number v-model="dataForm.sort" :min="0" :max="2147483647"></el-input-number>-->
      <!--        <br />-->
      <!--        <span>小提示：数值越大越靠前</span>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="是否推荐" prop="isRecommend">-->
      <!--        <el-switch v-model="dataForm.isRecommend" active-color="#13ce66" inactive-color="#999"></el-switch>-->
      <!--      </el-form-item>-->
      <el-form-item label="是否显示" prop="isDisplay">
        <el-switch v-model="dataForm.isDisplay" active-color="#13ce66" inactive-color="#999"></el-switch>
      </el-form-item>
      <el-form-item label="是否置頂" prop="isDisplay">
        <el-switch v-model="dataForm.isTop" active-color="#13ce66" inactive-color="#999"></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="loading">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Uploader from '@/components/uploader'
  import CkEditor from '../../../components/ckEditor/ckEditor'

  export default {
    components: { CkEditor, Uploader },
    data() {
      return {
        visible: false,
        dataForm: {
          id: 0,
          title: '',
          brief: '',
          content: '',
          coverUrl: '',
          videoUrl: '',
          contentType: 0,
          sort: 0,
          type: 2,
          isRecommend: false,
          isDisplay: true,
          isTop: false
        },
        coverUrlList: [],
        videoUrlList: [],
        contentType: {
          imageText: 0,
          video: 1
        },
        loading: false,
        dataRule: {
          title: [
            { required: true, message: '新闻标题不能为空', trigger: 'blur' },
            { min: 3, max: 100, message: '请输入 3 到 100 个字符', trigger: 'blur' }
          ],
          brief: [
            { required: true, message: '新闻简介不能为空', trigger: 'blur' },
            { min: 3, max: 100, message: '请输入 3 到 100 个字符', trigger: 'blur' }
          ],
          coverUrl: [{ required: true, message: '请上传主图', trigger: 'blur' }]
        }
      }
    },
    methods: {
      async initEditor(newsId) {
        this.dataForm = {
          id: 0,
          title: '',
          brief: '',
          content: '',
          coverUrl: '',
          videoUrl: '',
          contentType: 0,
          sort: 0,
          type: 2,
          isRecommend: false,
          isDisplay: true,
          isTop: false
        }
        this.visible = true
        this.$nextTick(async () => {
          this.$refs['dataForm'].resetFields()
          if (newsId) {
            var res = await this.$http({
              url: this.$http.adornUrl(`/news-admin/news/info/${newsId}`),
              method: 'post'
            })
            this.buildDataForm(res.data)
            this.$refs.ckEditor &&
            this.$refs.ckEditor.setData(res.data.content)
          } else {
            this.$refs.ckEditor && this.$refs.ckEditor.setData('')
          }
        })
      },
      buildDataForm(news) {
        this.dataForm.id = news.id
        this.dataForm.cateId = news.cateId
        this.dataForm.categoryName = news.categoryName
        this.dataForm.title = news.title
        this.dataForm.sort = news.sort
        this.dataForm.brief = news.brief
        this.dataForm.coverUrl = news.coverUrl
        this.dataForm.videoUrl = news.videoUrl
        this.dataForm.contentType = news.contentType
        this.dataForm.isDisplay = !!news.isDisplay
        this.dataForm.isRecommend = !!news.isRecommend
        this.dataForm.isTop = !!news.isTop
      },
      buildRequest() {
        return {
          id: this.dataForm.id || undefined,
          title: this.dataForm.title,
          brief: this.dataForm.brief,
          type: 2,
          contentType: this.dataForm.contentType,
          content: this.dataForm.content,
          coverUrl: this.dataForm.coverUrl,
          videoUrl: this.dataForm.videoUrl,
          sort: this.dataForm.sort,
          isRecommend: this.dataForm.isRecommend ? 0 : 1,
          isDisplay: this.dataForm.isDisplay ? 1 : 0,
          isTop: this.dataForm.isTop ? 1 : 0
        }
      },
      contentChanged(val) {
        this.dataForm.content = val
      },
      imageUploaded(file) {
        this.dataForm.coverUrl = file.url
      },
      videoUploaded(file) {
        this.dataForm.videoUrl = file.url
      },
      // 表单提交
      async dataFormSubmit() {
        try {
          var isValid = await this.$refs['dataForm'].validate()
          if (!isValid) return
          this.loading = true
          let res = await this.$http({
            url: this.$http.adornUrl(`/news-admin/news/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.buildRequest()
          })

          if (res && res.code === 200) {
            console.log(res)
            this.visible = false
            this.$notify.success({ title: '成功', message: '保存党建新闻成功' })
            this.$emit('refreshDataList')
            this.$refs.ckEditor && this.$refs.ckEditor.setData('')
          } else {
            this.$notify.error({ title: '错误', message: res.msg })
          }
          this.loading = false
        } catch (err) {
          this.loading = false
        }
      }
    },
    watch: {
      'dataForm.coverUrl'(val) {
        if (val) {
          this.coverUrlList = [val]
        } else {
          this.coverUrlList = []
        }
      },
      'dataForm.videoUrl'(val) {
        if (val) {
          this.videoUrlList = [val]
        } else {
          this.videoUrlList = []
        }
      },
      'dataForm.title'(val) {
        if (this.dataForm.contentType === 0) {
          this.dataForm.brief = val
        }
      }
    }
  }
</script>

<style scoped>
</style>
